<template>
  <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
    open
  </el-button>
  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <span>主题切换</span>
    <div>当前主题：{{ themeName }}</div>

    <main>
      <el-row >
        <div class="demo-color-box">

          <div  v-for="(item, key) in colorStore._theme" :key="key"
               @click="setThemeColor(item.color, item.label)">
            <div class="bb">
              <div class="aa" :style="{ 'backgroundColor': item.color[0] }"></div>
              {{ item.label }}
            </div>

          </div>
        </div>

      </el-row>
      <el-row class=" mb-4">
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
      </el-row>


    </main>
  </el-drawer>
</template>
<script lang="ts" setup>

import { ref } from 'vue'
const drawer = ref(false);
import { useColorStore } from "@/stores/counter";
// ...
const themeName = ref('默认主题');
const colorStore = useColorStore();
// ...

// ...
function setThemeColor(colorMap: any, label: any) {
  themeName.value = label;
  colorStore.setThemeColor(colorMap);
}
</script>
<style scoped>
.demo-color-box{
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.aa{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #5ae921;
}
.bb{
  display: flex;
  justify-items: center;
  flex-direction: column;
  align-items: center;
}
</style>